import React from 'react'
import './OrderStatus.css'
import { Button, Modal } from 'antd-mobile';
import { Link } from 'react-router-dom'
import { withRouter } from "react-router-dom";
import axios from 'axios';
const alert = Modal.alert
// import OrderDetails from '../OrderDetails/OrderDetails'
class OrderStatus extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            data: this.props.data
        }
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true
    }
    // 拒绝接单
    orderRefuse = () => {
        const refuse = alert('拒绝接单', '随意拒绝订单会影响您的店铺排名，真的要拒绝吗？', [
            { text: '取消', onPress: () => console.log('取消'), style: 'default' },
            { text: '确定', onPress: () => console.log('确认') }
        ]);
    }
    // 确认接单按钮
    confirmBtn = (num) => {
        console.log(num);
        const refuse = alert('确认接单', '接单成功，请尽快制作！', [
            { text: '取消', onPress: () => console.log('取消'), style: 'default' },
            { text: '确定', onPress: () => this.orderConfirm(num) }
        ]);
    }
    // 完成订单按钮
    completeBtn = (num) => {
        const refuse = alert('完成订单', '请确认是否完成订单', [
            { text: '取消', onPress: () => console.log('取消'), style: 'default' },
            { text: '确定', onPress: () => this.orderComplete(num) }
        ]);
    }
    // 确认接单ajax请求
    orderConfirm = (num) => {
        axios({
            url: 'api3/olife/prder/modify',
            method: 'POST',
            params: {
                order_id: num,
                order_status_id: 2
            }
        }).then(data => {
            console.log(data);
            this.props.again()
        }).catch(err => {
            console.log(err);
        })
    }
    // 完成订单ajax请求
    orderComplete = (num) => {
        axios({
            url: 'api3/olife/prder/modify',
            method: 'POST',
            params: {
                order_id: num,
                order_status_id: 3
            }
        }).then(data => {
            console.log(data);
            this.props.again()
        }).catch(err => {
            console.log(err);
        })
    }
    // 点击查看详情跳转页面
    detailsJump = (a) => {
        this.props.history.push({
            pathname: '/Home/OrderDetails',
            state: { a }
        })
    }
    render() {
        return (
            <div className="Box">
                {
                    (this.props.data || [] || undefined).map((item, index) => {
                        return (
                            <div className="orderBox" key={index}>
                                <div className="orderTitle">
                                    <span>{item.shop_name}</span>
                                    {
                                        item.order_status_id == 1 && <span>待接单</span>
                                    }
                                    {
                                        item.order_status_id == 2 && <span>处理中</span>
                                    }
                                    {
                                        item.order_status_id == 3 && <span>已完成</span>
                                    }

                                </div>
                                <p>{item.order_id}</p>
                                <div className="orderContent">
                                    <div className="orderContentTitle">
                                        <span className="titleLeft">{item.order_money}</span>
                                        <span className="titleRight">{item.order_create_time}</span>
                                        <span className="titleLeft">送餐时间</span>

                                        <span className="titleRight">{item.order_create_time}</span>
                                        <span className="titleLeft">配送费</span>
                                        <span className="titleRight">{item.shop_delivery_money}</span>
                                        <span className="titleLeft">满减</span>
                                        <span className="titleRight">{item.goods_act_status}</span>

                                        <span className="titleLeft">会员折扣</span>
                                    </div>
                                </div>

                                <div className="orderTitle">
                                    {
                                        item.orderInfo.map((e, index) => {
                                            return (
                                                <div key={index} className="shopName">
                                                    <span>{e.goods.goods_name}</span>
                                                    <span>数量{e.goods_num}</span>
                                                </div>
                                            )
                                        })
                                    }

                                </div>
                                <div className="detaBtn">
                                    {
                                        item.order_status_id == 1 && <Button type="ghost" inline size="small" onClick={this.detailsJump.bind(this, item)}>查看详情</Button>
                                    }
                                    {/* {
                                        item.order_status_id == 2 && <Button type="ghost" inline size="small" onClick={this.detailsJump}>查看详情</Button>
                                    }
                                    {
                                        item.order_status_id == 3 && <Button type="ghost" inline size="small" onClick={this.detailsJump}>查看详情</Button>
                                    } */}

                                </div>
                                <div className="orderBtn">
                                    {
                                        item.order_status_id == 1 && <Button type="warning" inline size="small" style={{ marginRight: '4px' }} onClick={this.orderRefuse}>拒绝接单</Button>
                                    }
                                    {
                                        item.order_status_id == 1 && <Button type="primary" inline size="small" className="am-button-borderfix" style={{ marginRight: '4px' }} onClick={this.confirmBtn.bind(this, item.order_id)}>确认接单</Button>
                                    }

                                    {
                                        item.order_status_id == 2 && <Button type="warning" inline size="small" style={{ marginRight: '4px' }} onClick={this.orderRefuse}>联系用户</Button>
                                    }
                                    {
                                        item.order_status_id == 2 && <Button type="primary" inline size="small" style={{ marginRight: '4px' }} onClick={this.completeBtn.bind(this, item.order_id)}>完成订单</Button>
                                    }
                                    {
                                        item.order_status_id == 3 && <Button type="large" inline size="small" style={{ marginRight: '4px' }} onClick={this.orderRefuse}>打印小票</Button>
                                    }

                                    {/* use `am-button-borderfix`. because Multiple buttons inline arranged, the last one border-right may not display */}
                                </div>
                            </div>
                        )

                    })

                }

            </div>
        )
    }
}
export default withRouter(OrderStatus)